<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/font_4599749_x4qzl62ztoq/iconfont.css">
    <link rel="stylesheet" href="./index.css">
    <title>微信开放平台</title>
</head>

<body>
    <!-- 总体 -->
    <div class="container">
        <div class="header">
            <div class="header-body header-left"><span class="iconfont"
                    style="color: rgba(46, 222, 114)">&#xe620;</span>
                <h1><a href="/">微信公众平台</a></h1>
            </div>
            <!-- 注册登录 -->
            <div class="header-body header-right">
                <div class="person"><a href=""><span class="iconfont">&#xe68f;</span> 立即注册</div></a>

                <div class="net"><a href=""><span class="iconfont" style="font-size: 20px;">&#xe638;</span>
                        <div style="float: right;">简易中文<span class="iconfont">&#xe614;</span></div>

                </div>
                </a>
            </div>
        </div>
        <div class="body">
            <!-- 二维码 -->
            <div class="body-container code">
                <div class="code-top">
                    <div class="code-top-content code-top-left">
                        <h4>登录</h4>
                    </div>
                    <div class="code-top-content code-top-right">
                        <h4>使用账号登录</h4>
                    </div>
                </div>
                <div class="code-mid"><img src="./img/Snipaste_2024-06-27_15-01-08.png"></img>
                </div>
                <div class="code-bottom">
                    <p>微信扫一扫，选择该微信下的</p>
                    <p>公众平台登录</p>
                </div>
            </div>
        </div>
        <div class="mp-body page_login">
            <div class="page_login_inner">
                <div class="qrcode_panel">
                    <dl class="qrcode_panel_main" style="display: none;">
                        <dt><img src="https://res.wx.qq.com/mpres/htmledition/images/mp_qrcode6eecea.gif"></dt>
                        <dd>扫描并关注<br>微信公众平台</dd>
                    </dl>
                    <p class="qrcode_panel_extend_info"><span class="iconfont">&#xe728;</span>
                        <span class="panel">微信公众平台</span>
                    </p>
                </div>
                <div class="notice">
                    <div class="notice-content notice-left">
                        系统公告
                    </div>
                    <div class="notice-game notice-content notice-left">
                        <i>●</i>春节期间小游戏审核安排通知<span class="iconfont" style="color: #ff4f15;">&#xe667;</span>
                    </div>
                    <div class="notice-pragram notice-content notice-left">
                        <i>●</i>春节期间小程序审核调整通知<span class="iconfont" style="color: #ff4f15;">&#xe667;</span>
                    </div>
                    <div class="notice-more notice-content notice-right">
                        查看更多<span class="iconfont">&#xe629;</i>
                    </div>
                </div>
                <!-- 账号分类 -->
                <div class="mp_kind_mod">
                    <div class="mp_kind_mod_hd">
                        <h3>账号分类</h3>
                    </div>
                    <div class="mp_kind_mod_bd group">
                        <div class="mp_kind_wrp">
                            <div class="mp_kind">
                                <div class="mp_backimg server"></div>
                                <div class="text">服务号</div>
                                <div class="mp_kind_content">给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。</div>
                            </div>
                        </div>
                        <div class="mp_kind_wrp">
                            <div class="mp_kind">
                                <div class="mp_backimg subscribe"></div>
                                <div class="text">订阅号</div>
                                <div class="mp_kind_content">给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。</div>
                            </div>
                        </div>
                        <div class="mp_kind_wrp">
                            <div class="mp_kind">
                                <div class="mp_backimg pragram"></div>
                                <div class="text">小程序</div>
                                <div class="mp_kind_content">给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 企业微信 -->
                <div class="full_width_mod enterprise_mod">
                    <a href="">
                        <span class="weui-desktop-vm_default" style="white-space: nowrap;">
                            <span class="iconfont enterprise">&#xe67e;</span>
                        </span>
                        <span class="weui-desktop-vm_primary">
                            <p class="name">企业微信
                                <span>原企业号</span>
                            </p>
                            <p class="weui-desktop-tips">
                                企业的专业办公管理工具。与微信一致的沟通体验，提供丰富免费的办公应用，并与微信消息、小程序、微信支付等互通，助力企业高效办公和管理。</p>
                        </span>
                    </a>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <div class="weui-desktop-foot">
                <div class="weui-desktop-foot__info">
                    <p class="weui-desktop-links weui-desktop-link-group weui-desktop-link-group_split">
                        <a class="first" href="">关于腾讯</a>
                        <a class="weui-desktop-link" href="weui-desktop-link">服务协议</a>
                        <a class="weui-desktop-link" href="weui-desktop-link">规则中心</a>
                        <a class="weui-desktop-link" href="weui-desktop-link">腾讯客服</a>
                        <a class="weui-desktop-link" href="weui-desktop-link">侵权投诉</a>
                        <a class="weui-desktop-link" href="weui-desktop-link">上传日志</a>


                    </p>
                </div>
                <div class="weui-desktop-foot__extra">
                    <p class="weui-desktop-link">Copyright © 2012-2024 Tencent. All Rights Reserved.</p>
                </div>
            </div>
        </div>

    </div>
</body>

</html>
<script>
    // 左侧的固定区域 鼠标经过
    let qrcode_panel_main = document.querySelector('.qrcode_panel_main')
    let qrcode_panel = document.querySelector('.qrcode_panel')
    qrcode_panel.addEventListener('mouseover', function () {
        qrcode_panel_main.style.display = 'block'
    })
    qrcode_panel.addEventListener('mouseout', function () {
        qrcode_panel_main.style.display = 'none'
    })
    // 该页面其他静态交互也是同样的方式 操作dom元素 对样式进行修改
</script>